<template>
  <view class="content">
    <view class="top">
      <view>
        <text>正在狗圈</text>
        <text>{{ topData.amount || 0 }}只</text>
      </view>
      <view class="mar-l">
        <text>累计置换</text>
        <text>{{ topData.born_history_num || 0 }}只</text>
      </view>
    </view>
    <view class="dog">
      <image mode="aspectFill" src="/static/images/dog.png"></image>
      <view class="wtd view1">申请领养中</view>
      <view class="view1">{{ topData.adoption_num || 0 }}只</view>
      <button class="btn" type="default" @click="goto(1)" size="mini">去查看</button>
    </view>
    <view class="dog">
      <image mode="aspectFill" src="/static/images/dog.png"></image>
      <view class="wtd view1">等待洗澡中</view>
      <view class="view1">{{ topData.need_wash_num || 0 }}只</view>
      <button class="btn" type="default" @click="goto(2)" size="mini">去查看</button>
    </view>
    <view class="dog">
      <image mode="aspectFill" src="/static/images/dog.png"></image>
      <view class="wtd view1">正在肥养中</view>
      <view class="view1">{{ topData.fatten_num || 0 }}只</view>
      <button class="btn" type="default" @click="goto(3)" size="mini">去查看</button>
    </view>
    <view class="dog">
      <image mode="aspectFill" src="/static/images/dog.png"></image>
      <view class="wtd view1">等待置换中</view>
      <view class="view1">{{ topData.borned_num || 0 }}只</view>
      <button class="btn" type="default" @click="goto(7)" size="mini">去置换</button>
      <!-- <button class="btn" type="default" @click="openPopup" size="mini">去置换</button> -->
    </view>
    <view class="dog row_column">
      <view class="top2">
        <image mode="aspectFill" src="/static/images/dog.png"></image>
        <view class="wtd view1">正在置换中</view>
        <view class="view1">{{ topData.noAdopt_num || 0 }}只</view>
        <button class="btn" type="default" @click="goto(5)" size="mini">去查看</button>
      </view>
      <view class="bottom2">
        <view class="waiting-info">
          <view class="info-title">置换等待时间</view>
          <view class="info-content">
            <view>每个会员成功置换时间据市场情况以及会员权重，有所不同</view>
            <view>以首页"成功置换区"的实际展示做参考</view>
            <view>分享粉丝、推荐会员、推荐商家等可影响会员权重</view>
          </view>
          <button class="w_btn" @click.stop="goto_no" type="warn" size="mini">我的会员权重</button>
        </view>
      </view>
    </view>
    <uni-popup ref="popupzh" borderRadius="10px 10px 10px 10px" background-color="#fff">
      <view class="popupzh">
        <view class="myrow2">
          <view> 当前已养成狗数 </view>
          <view> {{ topData.borned_num || 0 }}只 </view>
        </view>
        <view class="myrow2">
          <uni-icons class="pulldownIcon" type="pulldown" size="60" color="#5B9BD5"></uni-icons>
          <view class="icon">
            <button @click="goto(6)" class="greenBtn" size="mini">置换茶包</button>
            <view class="popup_text">无需等待，直接消费</view>
          </view>
          <view class="popup_text flex_1"> 每只狗可置换{{ topData.teabag_num || 0 }}包 </view>
          <view class="mask"></view>
        </view>
        <view class="myrow2">
          <uni-icons class="pulldownIcon" type="pulldown" size="60" color="#5B9BD5"></uni-icons>
          <view class="icon">
            <button @click="goto(7)" class="greenBtn" size="mini">置换沐浴露</button>
            <view class="popup_text">需等待</view>
          </view>
          <view class="icon flex_1">
            <view class="popup_text">每只狗可置换{{ parseFloat(topData.earn_num) || 0 }}包</view> <view class="popup_text">目前平均等待时间约{{ topData.avwaiting_time || 0 }}天</view>
          </view>
          <view class="mask"></view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getUserGoodsIndex, getSetInfo } from '@/api/bgame';
import { useUserStoreHook } from '@/store/user';
const topData = ref({
  amount: 0,
  born_history_num: 0,
  adoption_num: 0,
  need_wash_num: 0,
  fatten_num: 0,
  borned_num: 0,
  noAdopt_num: 0,
  avwaiting_time: 0,
  user_avwaiting_time: 0,
  teabag_num: 0,
  earn_num: 0,
  max_waiting_time: 0,
  min_waiting_time: 0,
});

const mallconfig = ref(0);

const getData = async () => {
  uni.showLoading({
    title: '获取数据中...',
    mask: true,
  });
  const res = await getUserGoodsIndex({});
  uni.hideLoading();

  if (1 == res.result) {
    const { amount = 0, born_history_num = 0, adoption_num = 0, need_wash_num = 0, fatten_num = 0, borned_num = 0, noAdopt_num = 0 } = res.data || {};
    Object.assign(topData.value, {
      amount,
      born_history_num,
      adoption_num,
      need_wash_num,
      fatten_num,
      borned_num,
      noAdopt_num,
    });
    console.log('topData.value', topData.value);
  }
};
const getDataTime = async () => {
  const res: any = await getSetInfo({});
  uni.hideLoading();

  if (1 == res.result) {
    const { avwaiting_time = 0, user_avwaiting_time = 0, teabag_num = 0, earn_num = 0, max_waiting_time = 0, min_waiting_time = 0 } = res.data || {};
    Object.assign(topData.value, {
      avwaiting_time,
      user_avwaiting_time,
      teabag_num,
      earn_num,
      max_waiting_time,
      min_waiting_time,
    });

    console.log('topData.value', topData.value);
  }
};
const goto = (type: number) => {
  if (2 == type) {
    uni.navigateTo({
      url: '/pages/dog/groups/shower',
    });
  } else if (7 == type) {
    uni.navigateTo({
      url: '/pages/dog/groups/launchDog',
    });
  } else if (6 == type) {
    uni.navigateTo({
      url: '/pages/dog/groups/replacement',
    });
  } else {
    uni.navigateTo({
      url: `/pages/dog/groups/toView${type}`,
    });
  }
};
const goto_no = () => {
  console.log('goto_no');
  uni.navigateTo({
    url: '/pages/dog/weight/index'
  });
};
const popupzh = ref();
const openPopup = () => {
  popupzh.value.open();
};
onShow(async () => {
  mallconfig.value = uni.getStorageSync('mallconfig') || 0;

  // 检查是否已绑定手机号
  if (mallconfig.value === 1) {
    const phone = uni.getStorageSync('phone');
    if (!phone) {
      uni.showModal({
        title: '提示',
        content: '访问此页面需要先绑定手机号',
        confirmText: '去绑定',
        cancelText: '返回',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/bind-mobile'
            });
          } else {
            uni.navigateBack();
          }
        }
      });
      return;
    }
  }

  await useUserStoreHook().getSign();
  getData();
  getDataTime();
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mar-l {
      margin-left: 8rpx;
    }

    view {
      width: 50%;
      border: green 1px solid;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 45rpx;
    }
  }
  .dog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rpx;
    border: green 1px solid;
    border-radius: 5rpx;
    padding: 12rpx 40rpx;

    .wtd {
      width: 110px;
      text-align: center;
    }

    image {
      border: #49e0b8 1px solid;
      border-radius: 10rpx;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
      width: 160rpx;
      height: 160rpx;
    }

    .btn {
      margin-top: 10rpx;
      width: 80px;
      border: green 1px solid;
      color: green;
      font-size: 24rpx;
      padding-top: 8rpx;
      padding-bottom: 8rpx;
    }
  }
  .row_column {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .top2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .bottom2 {
      color: #2f55b0;
      .text-center {
        text-align: center;
      }
      .icon {
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between; //居中

        .greenBtn {
          background-color: green;
          color: white;
        }

        .pulldownIcon {
          transform: rotate(270deg);
        }
        .w_btn {
          padding-left: 4px;
          padding-right: 4px;
        }
      }
      .waiting-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 10rpx;

        .info-title {
          font-size: 0.9rem;
          font-weight: bold;
          margin-bottom: 10rpx;
          color: #2f55b0;
          text-align: center;
          width: 100%;
        }

        .info-content {
          font-size: 0.8rem;
          line-height: 1.5;
          margin-bottom: 15rpx;
          width: 100%;
          display: flex;
          flex-direction: column;

          view {
            margin-bottom: 5rpx;

            &:nth-child(1) {
              text-align: left;
              text-indent: 2em;
              white-space: nowrap;
              width: 100%;
            }
            
            &:nth-child(2) {
              text-align: left;
              text-indent: 8em;
              white-space: nowrap;
              width: 100%;
            }

            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5) {
              text-align: left;
              text-indent: 2em;
              width: 100%;
            }
          }
        }

        .w_btn {
          align-self: center;
          padding-left: 4px;
          padding-right: 4px;
        }
      }
    }
  }
  .popupzh {
    margin: 20px;
    .myrow2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .icon {
        display: flex;
        align-items: center;
        flex-direction: column;

        button {
          margin-left: 0px;
          margin-right: 0px;
          height: 30px;
          line-height: 30px;
          padding-left: 20px;
          padding-right: 20px;
        }

        .greenBtn {
          width: 110px;
          background-color: green;
          color: white;
        }
      }
      .pulldownIcon {
        transform: rotate(270deg);
      }
      .flex_1 {
        flex: 1;
      }
      .mask {
        width: 60px;
        height: 64px;

        position: absolute;

        background: linear-gradient(to right, white, transparent);
        top: 0; /* 相对于正常位置向下移动20px */
        left: 0; /* 相对于正常位置向右移动30px */
      }
    }
  }
  .popup_text {
    font-size: 0.8rem;
  }
}
</style>
